<template>
  <view class="container">
    <view class="header">
      <uni-icons type="left" size="23" style="vertical-align: middle" @click="goback"></uni-icons>
      <text style="font-size: 36rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222; padding-left: 20rpx">{{ prodeuctionname }}</text>
    </view>
    <!-- 表单 -->
    <view class="item" v-if="show != 0">
      <view style="font-size: 28rpx">姓名</view>
      <input type="text" placeholder="请输入" v-model="obj.name" />
    </view>
    <view class="item" v-if="show != 0">
      <view style="font-size: 28rpx">手机</view>
      <input type="text" placeholder="请输入" v-model="obj.phone" />
    </view>
    <view style="padding-left: 40rpx; margin-top: 30rpx; font-size: 28rpx">留言备注</view>
    <textarea id="" cols="30" rows="10" class="textarea" maxlength="150" placeholder="请输入" v-model="obj.content"></textarea>
    <view style="position: relative; right: -561rpx; top: -76rpx">{{ obj.content.length }} / 150</view>
    <view class="submit" @click="sendmsg">提交</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        product_id: '',
        name: '',
        phone: '',
        content: ''
      },
      prodeuctionname: '',
      show: ''
    };
  },
  onLoad(opt) {
    console.log('留言标题----', opt.id, opt.name);
    this.obj.product_id = opt.id;
    this.prodeuctionname = opt.name;
    this.getuserinfo();
  },
  methods: {
    // 获取用户信息
    async getuserinfo() {
      const res = await uni.$http.post('user/index');
      console.log('-----个人信息-----', res.data.data);
      this.show = res.data.data.is_show;
    },
    // 发送留言
    async sendmsg() {
      if (!/^1[3-9][0-9]{9}$/.test(this.obj.phone)) {
        return uni.showToast({
          title: '手机号格式不正确，请重新输入',
          icon: 'none'
        });
      }
      if (this.obj.name == '' || this.obj.phone.length != 11 || this.obj.product_id == '' || this.obj.content == '') {
        return uni.showToast({
          title: '输入内容不能为空，请重新输入',
          icon: 'none'
        });
      }

      const res = await uni.$http.post('user/addMessage', { ...this.obj });
      if (res.data.code == 1) {
        uni.showToast({
          title: '留言成功，请等待管理员处理',
          icon: 'none'
        });
        this.obj = {
          product_id: '',
          name: '',
          phone: '',
          content: ''
        };
      }
    },
    goback() {
      uni.navigateBack();
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .header {
    margin-top: 60rpx;
    margin-left: 30rpx;
  }
  .item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 30rpx 0 40rpx;
    justify-content: space-between;
    margin-top: 30rpx;
    input {
      box-sizing: border-box;
      width: 582rpx;
      height: 76rpx;
      background: #ffffff;
      padding: 10rpx 38rpx;

      line-height: 76rpx;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      border: 2rpx solid #e3e3e3;
    }
  }
  .textarea {
    box-sizing: border-box;
    width: 680rpx;
    height: 200rpx;
    padding: 30rpx;
    margin: 20rpx 40rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #e3e3e3;
  }
  .submit {
    position: absolute;
    bottom: 54rpx;
    left: 36rpx;
    width: 690rpx;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    color: #fff;
    background: linear-gradient(180deg, #058dfb 0%, #0274f9 100%);
    border-radius: 100rpx 100rpx 100rpx 100rpx;
  }
}
</style>
